<!-- 
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适


style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

 -->



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <div class="box" style="width:100px;"></div>
    <script>
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);  //得到任意样式行内样式，内嵌的都可以，数字型号
        console.log(box.style.width);   //这个只能得到行内样式的属性,不能得到内嵌属性 (字符型)
        //        console.log(box.offsetHeight); 
        box.style.width = '300px';
    </script>

</body>

</html>